<!DOCTYPE html>
<html lang="en">
<head>
  <title>Iraqi Casualties Comparison</title>
  <meta charset="UTF-8">
<meta name="description" content="Iraq Unrest Data Visualization">
<meta name="author" content="Brian Douglas Smith">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.3.0/rickshaw.min.css">
<style type="text/css">

  #chart_container {
    position: relative;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
  }

  #y_axis {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
  }

  #chart {
    display: inline-block;
    margin-left: 40px;
  }

  #legend {
    display: inline-block;
    position: relative;
    left: 8px;
  }

</style>

</head>

<body>
<h1>Iraqi Casualties Comparison</h1>
<p><a href="http://bds.github.io/iraq_unrest/">http://bds.github.io/iraq_unrest/</a></p>
<div id="chart_container">
  <div id="y_axis"></div>
  <div id="chart"></div>
</div>
<div id="legend"></div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.3.0/rickshaw.min.js"></script>
<script type="text/javascript">
  var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum14' } );

  var graph = new Rickshaw.Graph( {
    element: document.querySelector("#chart"),
    renderer: 'area', width: 640, height: 480,
    series: [ {
      name: 'Iraq Body Count',
      color: palette.color(),
      data: [{"x":1075536000,"y":609},{"x":1078041600,"y":660},{"x":1080720000,"y":1001},{"x":1083308400,"y":1304},{"x":1085986800,"y":656},{"x":1088578800,"y":900},{"x":1091257200,"y":818},{"x":1093935600,"y":868},{"x":1096527600,"y":1031},{"x":1099206000,"y":1011},{"x":1101801600,"y":1653},{"x":1104480000,"y":1106},{"x":1107158400,"y":1188},{"x":1109577600,"y":1266},{"x":1112256000,"y":871},{"x":1114844400,"y":1119},{"x":1117522800,"y":1336},{"x":1120114800,"y":1299},{"x":1122793200,"y":1528},{"x":1125471600,"y":2266},{"x":1128063600,"y":1415},{"x":1130745600,"y":1298},{"x":1133337600,"y":1465},{"x":1136016000,"y":1135},{"x":1138694400,"y":1543},{"x":1141113600,"y":1569},{"x":1143792000,"y":1940},{"x":1146380400,"y":1792},{"x":1149058800,"y":2251},{"x":1151650800,"y":2553},{"x":1154329200,"y":3279},{"x":1157007600,"y":2835},{"x":1159599600,"y":2556},{"x":1162281600,"y":2977},{"x":1164873600,"y":3064},{"x":1167552000,"y":2886},{"x":1170230400,"y":2948},{"x":1172649600,"y":2607},{"x":1175324400,"y":2682},{"x":1177916400,"y":2495},{"x":1180594800,"y":2809},{"x":1183186800,"y":2180},{"x":1185865200,"y":2671},{"x":1188543600,"y":2457},{"x":1191135600,"y":1360},{"x":1193814000,"y":1286},{"x":1196409600,"y":1095},{"x":1199088000,"y":982},{"x":1201766400,"y":844},{"x":1204272000,"y":1049},{"x":1206946800,"y":1623},{"x":1209538800,"y":1272},{"x":1212217200,"y":886},{"x":1214809200,"y":747},{"x":1217487600,"y":623},{"x":1220166000,"y":627},{"x":1222758000,"y":584},{"x":1225436400,"y":575},{"x":1228032000,"y":521},{"x":1230710400,"y":576},{"x":1233388800,"y":366},{"x":1235808000,"y":402},{"x":1238482800,"y":426},{"x":1241074800,"y":565},{"x":1243753200,"y":387},{"x":1246345200,"y":498},{"x":1249023600,"y":407},{"x":1251702000,"y":618},{"x":1254294000,"y":332},{"x":1256972400,"y":435},{"x":1259568000,"y":226},{"x":1262246400,"y":475},{"x":1264924800,"y":263},{"x":1267344000,"y":304},{"x":1270018800,"y":336},{"x":1272610800,"y":385},{"x":1275289200,"y":387},{"x":1277881200,"y":385},{"x":1280559600,"y":443},{"x":1283238000,"y":516},{"x":1285830000,"y":254},{"x":1288508400,"y":312},{"x":1291104000,"y":307},{"x":1293782400,"y":217},{"x":1296460800,"y":389},{"x":1298880000,"y":252},{"x":1301554800,"y":311},{"x":1304146800,"y":289},{"x":1306825200,"y":381},{"x":1309417200,"y":386},{"x":1312095600,"y":308},{"x":1314774000,"y":401},{"x":1317366000,"y":397},{"x":1320044400,"y":366},{"x":1322640000,"y":279},{"x":1325318400,"y":388},{"x":1327996800,"y":524},{"x":1330502400,"y":356},{"x":1333177200,"y":377},{"x":1335769200,"y":392},{"x":1338447600,"y":304},{"x":1341039600,"y":529},{"x":1343718000,"y":469},{"x":1346396400,"y":422},{"x":1348988400,"y":396},{"x":1351666800,"y":290},{"x":1354262400,"y":240},{"x":1356940800,"y":275},{"x":1359619200,"y":357},{"x":1362038400,"y":358},{"x":1364713200,"y":395},{"x":1367305200,"y":544},{"x":1369983600,"y":887},{"x":1372575600,"y":0},{"x":1375254000,"y":0},{"x":1377932400,"y":0},{"x":1380524400,"y":0},{"x":1383202800,"y":0},{"x":1385798400,"y":0}]
    }, {
      name: 'Iraq Gov',
      color: palette.color(),
      data: [{"x":1075536000,"y":0},{"x":1078041600,"y":0},{"x":1080720000,"y":0},{"x":1083308400,"y":0},{"x":1085986800,"y":0},{"x":1088578800,"y":0},{"x":1091257200,"y":0},{"x":1093935600,"y":0},{"x":1096527600,"y":0},{"x":1099206000,"y":0},{"x":1101801600,"y":0},{"x":1104480000,"y":0},{"x":1107158400,"y":0},{"x":1109577600,"y":0},{"x":1112256000,"y":0},{"x":1114844400,"y":0},{"x":1117522800,"y":0},{"x":1120114800,"y":0},{"x":1122793200,"y":0},{"x":1125471600,"y":0},{"x":1128063600,"y":0},{"x":1130745600,"y":0},{"x":1133337600,"y":0},{"x":1136016000,"y":0},{"x":1138694400,"y":0},{"x":1141113600,"y":0},{"x":1143792000,"y":0},{"x":1146380400,"y":0},{"x":1149058800,"y":1055},{"x":1151650800,"y":1009},{"x":1154329200,"y":1850},{"x":1157007600,"y":0},{"x":1159599600,"y":0},{"x":1162281600,"y":1427},{"x":1164873600,"y":1975},{"x":1167552000,"y":0},{"x":1170230400,"y":2087},{"x":1172649600,"y":1806},{"x":1175324400,"y":2078},{"x":1177916400,"y":1689},{"x":1180594800,"y":2124},{"x":1183186800,"y":1463},{"x":1185865200,"y":1875},{"x":1188543600,"y":1856},{"x":1191135600,"y":917},{"x":1193814000,"y":887},{"x":1196409600,"y":606},{"x":1199088000,"y":568},{"x":1201766400,"y":541},{"x":1204272000,"y":721},{"x":1206946800,"y":1082},{"x":1209538800,"y":1073},{"x":1212217200,"y":563},{"x":1214809200,"y":509},{"x":1217487600,"y":465},{"x":1220166000,"y":431},{"x":1222758000,"y":440},{"x":1225436400,"y":317},{"x":1228032000,"y":340},{"x":1230710400,"y":316},{"x":1233388800,"y":191},{"x":1235808000,"y":258},{"x":1238482800,"y":252},{"x":1241074800,"y":355},{"x":1243753200,"y":155},{"x":1246345200,"y":437},{"x":1249023600,"y":275},{"x":1251702000,"y":456},{"x":1254294000,"y":203},{"x":1256972400,"y":410},{"x":1259568000,"y":122},{"x":1262246400,"y":367},{"x":1264924800,"y":196},{"x":1267344000,"y":352},{"x":1270018800,"y":367},{"x":1272610800,"y":328},{"x":1275289200,"y":337},{"x":1277881200,"y":284},{"x":1280559600,"y":535},{"x":1283238000,"y":426},{"x":1285830000,"y":273},{"x":1288508400,"y":185},{"x":1291104000,"y":171},{"x":1293782400,"y":151},{"x":1296460800,"y":259},{"x":1298880000,"y":197},{"x":1301554800,"y":247},{"x":1304146800,"y":211},{"x":1306825200,"y":177},{"x":1309417200,"y":271},{"x":1312095600,"y":259},{"x":1314774000,"y":239},{"x":1317366000,"y":185},{"x":1320044400,"y":258},{"x":1322640000,"y":187},{"x":1325318400,"y":155},{"x":1327996800,"y":151},{"x":1330502400,"y":150},{"x":1333177200,"y":112},{"x":1335769200,"y":126},{"x":1338447600,"y":132},{"x":1341039600,"y":131},{"x":1343718000,"y":325},{"x":1346396400,"y":164},{"x":1348988400,"y":365},{"x":1351666800,"y":144},{"x":1354262400,"y":166},{"x":1356940800,"y":208},{"x":1359619200,"y":177},{"x":1362038400,"y":136},{"x":1364713200,"y":163},{"x":1367305200,"y":205},{"x":1369983600,"y":630},{"x":1372575600,"y":240},{"x":1375254000,"y":921},{"x":1377932400,"y":356},{"x":1380524400,"y":885},{"x":1383202800,"y":964},{"x":1385798400,"y":948}]
    }, {
      name: 'AFP',
      color: palette.color(),
      data: [{"x":1075536000,"y":0},{"x":1078041600,"y":0},{"x":1080720000,"y":0},{"x":1083308400,"y":0},{"x":1085986800,"y":0},{"x":1088578800,"y":0},{"x":1091257200,"y":0},{"x":1093935600,"y":0},{"x":1096527600,"y":0},{"x":1099206000,"y":0},{"x":1101801600,"y":0},{"x":1104480000,"y":0},{"x":1107158400,"y":0},{"x":1109577600,"y":0},{"x":1112256000,"y":0},{"x":1114844400,"y":0},{"x":1117522800,"y":0},{"x":1120114800,"y":0},{"x":1122793200,"y":0},{"x":1125471600,"y":0},{"x":1128063600,"y":0},{"x":1130745600,"y":0},{"x":1133337600,"y":0},{"x":1136016000,"y":0},{"x":1138694400,"y":0},{"x":1141113600,"y":0},{"x":1143792000,"y":0},{"x":1146380400,"y":0},{"x":1149058800,"y":0},{"x":1151650800,"y":0},{"x":1154329200,"y":0},{"x":1157007600,"y":0},{"x":1159599600,"y":0},{"x":1162281600,"y":0},{"x":1164873600,"y":0},{"x":1167552000,"y":0},{"x":1170230400,"y":0},{"x":1172649600,"y":0},{"x":1175324400,"y":0},{"x":1177916400,"y":0},{"x":1180594800,"y":0},{"x":1183186800,"y":0},{"x":1185865200,"y":0},{"x":1188543600,"y":0},{"x":1191135600,"y":0},{"x":1193814000,"y":0},{"x":1196409600,"y":0},{"x":1199088000,"y":0},{"x":1201766400,"y":0},{"x":1204272000,"y":0},{"x":1206946800,"y":0},{"x":1209538800,"y":0},{"x":1212217200,"y":0},{"x":1214809200,"y":0},{"x":1217487600,"y":0},{"x":1220166000,"y":0},{"x":1222758000,"y":0},{"x":1225436400,"y":0},{"x":1228032000,"y":0},{"x":1230710400,"y":0},{"x":1233388800,"y":0},{"x":1235808000,"y":0},{"x":1238482800,"y":0},{"x":1241074800,"y":0},{"x":1243753200,"y":0},{"x":1246345200,"y":0},{"x":1249023600,"y":0},{"x":1251702000,"y":0},{"x":1254294000,"y":0},{"x":1256972400,"y":0},{"x":1259568000,"y":0},{"x":1262246400,"y":0},{"x":1264924800,"y":0},{"x":1267344000,"y":0},{"x":1270018800,"y":0},{"x":1272610800,"y":0},{"x":1275289200,"y":0},{"x":1277881200,"y":0},{"x":1280559600,"y":0},{"x":1283238000,"y":0},{"x":1285830000,"y":0},{"x":1288508400,"y":0},{"x":1291104000,"y":0},{"x":1293782400,"y":0},{"x":1296460800,"y":0},{"x":1298880000,"y":0},{"x":1301554800,"y":0},{"x":1304146800,"y":0},{"x":1306825200,"y":0},{"x":1309417200,"y":0},{"x":1312095600,"y":0},{"x":1314774000,"y":0},{"x":1317366000,"y":0},{"x":1320044400,"y":0},{"x":1322640000,"y":0},{"x":1325318400,"y":0},{"x":1327996800,"y":0},{"x":1330502400,"y":0},{"x":1333177200,"y":0},{"x":1335769200,"y":0},{"x":1338447600,"y":0},{"x":1341039600,"y":282},{"x":1343718000,"y":278},{"x":1346396400,"y":278},{"x":1348988400,"y":253},{"x":1351666800,"y":136},{"x":1354262400,"y":160},{"x":1356940800,"y":144},{"x":1359619200,"y":246},{"x":1362038400,"y":220},{"x":1364713200,"y":271},{"x":1367305200,"y":461},{"x":1369983600,"y":614},{"x":1372575600,"y":452},{"x":1375254000,"y":875},{"x":1377932400,"y":693},{"x":1380524400,"y":880},{"x":1383202800,"y":743},{"x":1385798400,"y":692}]
    } ]});

  var x_axis = new Rickshaw.Graph.Axis.Time( { 
    graph: graph
  } );

  var y_axis = new Rickshaw.Graph.Axis.Y( {
    graph: graph,
    orientation: 'left',
    element: document.getElementById('y_axis'),
  } );

  var legend = new Rickshaw.Graph.Legend({
    graph: graph,
    element: document.getElementById('legend')
  });

  var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
      graph: graph,
      legend: legend
  });

  var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight({
    graph: graph,
    legend: legend
  });

  var hoverDetail = new Rickshaw.Graph.HoverDetail( {
      graph: graph,
      yFormatter: function(y) { return Math.floor(y) + "" }
  } );

  graph.renderer.unstack = true;
  graph.render();
</script> 
</body>
</html>
